<template>
  <el-dialog title="详情" :close-on-click-modal="false" :visible.sync="visible">
    <div class="border">
      <el-timeline>
        <el-timeline-item v-for="(item,index) in activities" :key="index" :timestamp="item.endTime" placement="top">
          <el-card>
            <h4>{{item.name}}</h4>
            <p v-if="item.endTime&&item.upName">{{item.upName}}  在[{{item.endTime}}] 处理了[{{item.name}}]任务</p>
            <p v-else-if="item.upName">等待 [{{item.upName}}] 处理任务 </p>
            <p v-else>等待拾取 [{{item.name}}]任务</p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>

    <div class="border">
      <img :src="'data:image/png;base64,'+ico" class="avatar" />
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      reverse: true,
      content: [],
      activities: [],
      ico: ""
    };
  },
  methods: {
    init(id, instanceId) {
      this.visible = true;
      this.$nextTick(() => {
        this.$http({
          url: this.$http.adornUrl(`/activiti/leave/info/${id}`),
          method: "get",
          params: this.$http.adornParams()
        }).then(({ data }) => {
          if (data && data.code === 0) {
            console.log(data);
            this.activities = data.historicTaskInstanceList;
          }
        });

        this.$http({
          url: this.$http.adornUrl(
            `/activiti/process/read-resource/${instanceId}`
          ),
          method: "get",
          params: this.$http.adornParams()
        }).then(({ data }) => {
          this.ico = data;
        });
      });
    }
  }
};
</script>


<style scoped lang="scss">
.border {
  border: 1px solid #eee;
  padding: 20px 10px;
  margin-bottom: 10px;
}
.border img {
  width: 100%;
}

ul{
  list-style: none;
}

/deep/ .border .el-timeline-item__tail {
  position: absolute;
  left: -14px;
  height: 100%;
  border-left: 2px solid #e4e7ed;
}

/deep/ .border .el-timeline-item{
  position: relative;
}

/deep/ .border  .el-timeline-item__node {
  width: 12px;
  height: 12px;
  position: absolute;
  left: -19px;
  top: 6px;
  background-color: #e4e7ed;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}



</style>
